﻿<template>
		<div>
	<div class="layout-main">
            <el-row style="margin-bottom:12px">
                <el-button v-on:click="add()" type="primary" size="small">添加</el-button>
            </el-row >
            <el-form ref="queryParams" inline label-position="right" label-width="180px" v-model="queryParams">
                                                                                <el-form-item label="">
                                        <el-input size="small" v-model="queryParams.orderId" placeholder="" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="类型1，送货单，2生产条码">
                                        <el-input size="small" v-model="queryParams.type" placeholder="类型1，送货单，2生产条码" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="客户订单号">
                                        <el-input size="small" v-model="queryParams.poErpNo" placeholder="客户订单号" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="客户订单行号">
                                        <el-input size="small" v-model="queryParams.poLineNo" placeholder="客户订单行号" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="客户物料编码">
                                        <el-input size="small" v-model="queryParams.productCode" placeholder="客户物料编码" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="客户物料名称">
                                        <el-input size="small" v-model="queryParams.productName" placeholder="客户物料名称" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="客户规格描述">
                                        <el-input size="small" v-model="queryParams.productScale" placeholder="客户规格描述" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="">
                                        <el-input size="small" v-model="queryParams.smallPackageCount" placeholder="" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="大箱条码数量">
                                        <el-input size="small" v-model="queryParams.bigPackageCount" placeholder="大箱条码数量" style="width: 120px" />
                                    </el-form-item>
                                                                <el-form-item label="外箱条码数量">
                                        <el-input size="small" v-model="queryParams.outPackageCount" placeholder="外箱条码数量" style="width: 120px" />
                                    </el-form-item>
                                                <el-form-item>
                    <el-button v-on:click="search()" type="primary"  size="small">搜索</el-button>
                    <el-button v-on:click="reset()"    size="small">重置</el-button>
                </el-form-item>
            </el-form>
			<!-- 
              <Table :loading="loading" :columns="columns" :data="saleOrderItems" border>
            </Table>
			-->
			  <el-table size="small" :data="saleOrderItems" border style="width: 100%" v-loading="loading">
					<el-table-column
					  type="selection"
					  width="55">
					</el-table-column>
					
											 											 						 <el-table-column align="center" prop="orderId" label="">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="type" label="类型1，送货单，2生产条码">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="poErpNo" label="客户订单号">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="poLineNo" label="客户订单行号">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="productCode" label="客户物料编码">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="productName" label="客户物料名称">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="productScale" label="客户规格描述">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="smallPackageCount" label="">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="bigPackageCount" label="大箱条码数量">
														 </el-table-column>
																	 						 <el-table-column align="center" prop="outPackageCount" label="外箱条码数量">
														 </el-table-column>
																	 <el-table-column align="center" prop="id" label="操作">
							<template slot-scope="scope">
								<el-button type="danger" @click="doDelete(scope.row)" size="small">删除</el-button>
								<el-button type="primary" @click="edit(scope.row)" size="small">编辑</el-button>
							</template>
						 </el-table-column>
               
			  </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
       	<CSaleOrderItemDialog ref="saleOrderItemDialog" @cancel="getList()" @ok="getList()" />
    </div>
</template>
<script>
import CSaleOrderItemDialog from "./CSaleOrderItemDialog.vue"
export default {
    name: 'SaleOrderItem',
    components:{
        CSaleOrderItemDialog
    },
    data() {
        return {
            loading: false,

            queryParams: {

            },
            others: {

            },
            saleOrderItem: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            saleOrderItems: [

            ],
            rules: {}
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        cbtime: function(value) {
            this.others;
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/sys/saleorderitem/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.saleOrderItems = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        doDelete: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/sys/saleorderitem/doDelete.action", { id: id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.errorMessage("操作异常!" + body.info);
                        }
                    }).catch(error => {

                    });
                },
                onCancel: function() {

                }
            });
        },
        edit: function(row) {
            this.saleOrderItem = row;
            this.$refs['saleOrderItemDialog'].showDialog(row.id);
        },
        add: function() {
            this.saleOrderItem = {};
            this.$refs['saleOrderItemDialog'].showDialog("");
        }
        
    }
}
</script>
<style scoped>
</style>